<template>
    <div class="all">
        <div class="content">
            <table>
                <tbody>
                    <tr>
                        <td>活动来源</td>
                        <td>
                            <van-field 
                            v-model="fieldValue"
                                is-link
                                readonly
                                placeholder="选择活动来源"
                                @click="show=true"
                            ></van-field>
                            <van-popup v-model:show="show" position="bottom" 
                            round :style="{height:'30%'}">
                                <van-picker 
                                    title="活动来源"
                                    :columns="columns"
                                    @confirm="btnConfirmFiled"
                                    @cancel="btnCancel"
                                >
                                </van-picker>
                            </van-popup>
                        </td>
                    </tr>
                    <tr>
                        <td>服务时间</td>
                        <td>
                            <van-cell title="选择日期" is-link @click="showPopup"></van-cell>
                            <van-popup v-model:show="showdate" position="bottom" 
                            round :style="{height:'30%'}">
                                <van-date-picker v-model="s"
                                    title="选择日期"
                                    :min-date="minDate"
                                    :max-date="maxDate"  
                                    @confirm="btnConfirmdate"
                                    @cancel="btnCancel"
                                    >
                                </van-date-picker>
                            </van-popup>
                        </td>
                    </tr>
                    <tr>
                        <td>服务时长</td>
                        <td>
                            <van-field 
                            v-model="t"
                                is-link
                                readonly
                                placeholder="选择时长"
                                @click="showtime=true"
                            ></van-field>
                            <van-popup v-model:show="showtime" position="bottom" 
                            round :style="{height:'30%'}">
                                <van-picker 
                                    title="活动来源"
                                    :columns="columnstime"
                                    @confirm="btnConfirmTime"
                                    @cancel="btnCancel"
                                >
                                </van-picker>
                            </van-popup>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" class="text_td">服务内容
                            <br>
                            <textarea name="" id="" cols="30" rows="10" v-model="obj.content" placeholder="请对服务内容进行简要描述"></textarea>
                            <span>{{obj.content.length}}/100</span>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <br>
                            <van-uploader v-model="obj.photos" :upload-text="uploadTxt" max-count="2" image-fit="cover">                                
                            </van-uploader>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="sub" @click="btnsub">
            提交
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref, watch } from 'vue';
import { Myservices ,getMyservices} from '@/api/volunteerApi';

let uploadTxt=ref('添加照片')

let id=ref()

onMounted(async ()=>{
    let res=await getMyservices()
    id.value=res[res.length-1].id+1
    console.log(id.value);    
})
let obj = ref(
    {
        id: 0,               //活动id
        source:'',              //活动来源
        serviceTime: '',       // 服务时间(格式建议:YYYY-MM-DD HH:mm:ss)
        location: '',          // 服务地点(字符串)
        content: '',           // 服务内容(文本描述)
        photos: [],            // 服务照片(数组存储URL)
        duration: 0,           // 服务时长(单位:小时，数字类型)
        actpoint:4,            // 服务积分
        recordTime: new Date().toLocaleString().split('/').join('-'),// 纪实时间(默认当前时间)
        status: '审核通过'      // 审核状态(审核驳回/审核中/审核通过)
    }
)

// ---------活动来源弹出层
let fieldValue=ref('')
let show=ref(false)
let columns = ref([
    { text: '阳光花园', value: 'SunshineGarden' },
    { text: '金色港湾', value: 'GoldenHarbor' },
    { text: '翠湖天地', value: 'EmeraldLake' },
    { text: '星河湾', value: 'StarRiver' },
    { text: '枫林绿洲', value: 'MapleOasis' },
    { text: '江南水乡', value: 'RiverTown' },
    { text: '城市花园', value: 'UrbanGarden' },
    { text: '棕榈泉', value: 'PalmSprings' },
    { text: '玫瑰园', value: 'RoseGarden' }
])

function btnConfirmFiled (value) {
    obj.value.source = value.selectedOptions[0].text
    console.log(obj.value.source);
    show.value = false
}
// ---------

// ---------服务时间弹出层
let s=ref(['2021','01','01']) //定义默认时间
let showdate=ref(false)
let minDate=new Date(2000,0,1)
let maxDate=new Date(2026,0,1)
function showPopup(){
    showdate.value=true
}
function btnConfirmdate(){
    obj.value.serviceTime=s.value[0]+'-'+s.value[1] +'-'+s.value[2]
    console.log(obj.value.serviceTime);
    showdate.value=false
}
// ---------

// -------------服务时长
let t=ref('')
let showtime=ref(false)
let columnstime = ref([
    { text: '1小时', value: '1' },
    { text: '2小时', value: '2' },
    { text: '3小时', value: '3' },
    { text: '4小时', value: '4' },
    { text: '5小时', value: '5' },
    { text: '6小时', value: '6' },
    { text: '7小时', value: '7' },
    { text: '8小时', value: '8' },
])

function btnConfirmTime (value) {
    obj.value.duration = value.selectedOptions[0].value
    console.log(obj.value.duration);
    showtime.value = false
}
// -------------

// 所有弹出层的取消按钮
function btnCancel(){
    show.value=false
    showtime.value=false
    showdate.value=false
}

watch(()=>obj.value,(newvalue)=>{
    if(newvalue.content.length>100){
        alert('字数太多啦')
    }
},{deep:true})

async function btnsub(){   
    if( confirm('确认提交？')){
        obj.value.id=id.value
        let res=await Myservices(obj.value)
        console.log(res);
    }
    // console.log(fileList.value[0].content);
    // console.log(fileList.value[0]);
}
</script>
<style scoped>
input{
    background-color: transparent;
}
.all{
    width: 100%;
    height: 100%;
    background-color: var(--bg-accent);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.content{
    width: 100%;
    height: 600px;
    background-color: var(--white);
}
table{
    width: 100%;
    font-size: var(--font-md);
    padding: 0 10px;
}
td{
    border-bottom: 1px solid var(--border-light);
    padding: var(--spacing-sm) 0;
}
tr{
    height: 55px;
}
tr:last-child td {
    border-bottom: none;
}
tr input{
    width: 90%;
    height: 40px;
    border: 1px solid var(--border-color);
    outline: none;
    font-size: var(--font-md);
    margin-right: 8px;
    border-radius: var(--radius-small);
    padding: 0 var(--spacing-sm);
    background-color: var(--bg-secondary);
}
tr input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.2);
}
td textarea{
    width: 100%;
    height: 100px;
    border: 1px solid var(--border-color);
    outline: none;
    font-size: var(--font-md);
    margin-top: 5px;
    background-color: var(--bg-secondary);
    border-radius: var(--radius-small);
    padding: var(--spacing-sm);
    resize: vertical;
}
td textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.2);
}
.text_td{
    position: relative;
}
.text_td span{
    position: absolute;
    right: 10px;
    bottom: 10px;
    color: var(--text-secondary);
    font-size: var(--font-sm);
}
.sub{
    width: 90%;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border-radius: var(--radius-large);
    margin-top: 20px;
    line-height: 50px;
    text-align: center;
    color: var(--white);
    font-weight: 600;
    font-size: var(--font-lg);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(255, 107, 53, 0.3);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sub::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.sub:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
}

.sub:hover::before {
    left: 100%;
}
</style>